@extends('admin_system/public/layout')
@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">发送消息</h3>
        </div>
        <div class="panel-body" style="overflow-y: scroll;height: 400px">
            @foreach($teacher_msg as $k=>$v)
                <div style="width: 80%;margin: auto">
                    <div class="media">
                        <a class="media-left" href="#">
                            <img src="{{$v->avg}}" style="width: 64px; height: 64px;">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading text-info">{{$v->user_name}}</h4>
                            @if(json_decode($v->msg,true)['type']===1)
                                {{json_decode($v->msg,true)['content']}}
                            @elseif(json_decode($v->msg,true)['type']===2)
                                <img src="{{json_decode($v->msg,true)['content']}}" width="50" height="50">
                            @endif
                        </div>
                    </div>
                </div>
                <br>
            @endforeach
        </div>
        <br><br>
        <div style="width: 80%;margin: auto">
            <div class="alert alert-warning" role="alert">
                <strong>Warning!</strong>
                图片与文字不能同时发送只能发送一种，优先选择发送文字
            </div>
            <form action="/admin_system/live/send_msg" enctype="multipart/form-data" method="post">
                {{csrf_field()}}
                <textarea name="msg" id="msg" style="width: 100%;min-height: 150px"></textarea>
                <div class="form-group">
                    <label for="inputID" class="control-label">发送图片信息:</label>
                    <div class="">
                        <input type="file" name="img" id="inputID" class="form-control" value="" title="">
                    </div>
                </div>
                <input type="hidden" name="group_id" value="{{$group_id}}">
                <input type="hidden" name="width" id="wh" value="0">
                <input type="hidden" name="height" id="ht" value="0">
                <div class="form-group">
                    <div>
                        <button type="submit" id="sb" class="btn btn-primary">发送</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        let sb = document.getElementById('sb');
        let msg = document.getElementById('msg');
        let inputID = document.getElementById('inputID');
        let wh = document.getElementById('wh');
        let ht = document.getElementById('ht');

        inputID.addEventListener('change', function () {
            let url = inputID.files[0];
            let img_url = URL.createObjectURL(url);
            let img = new Image();
            img.onload = function () {
                var width = img.width;
                var height = img.height;
                wh.value = width;
                ht.value = height;
            };
            img.src = img_url;
        })


        sb.addEventListener('click', function () {
            if (msg === null || inputID === null) {
                alert('不能发送空的信息内容');
                return false;
            }
            setTimeout(function () {
                window.location.reload()
            }, 500)
        })
    </script>
@endsection